<template>
  <div class="container">
    <div class="app-container" style="padding: 20px;">
      <el-row style="display: flex; border-bottom: 1px solid #ccc;">
        <span style="margin-top: 20px;">企业名称:</span>
        <el-input placeholder="请输入企业名称" style="margin-top: 10px;margin-bottom: 10px; margin-left: 20px; width: 200px;" />
        <el-button type="primary" size="mini" style="height: 40px; margin-top: 10px; margin-left: 20px; margin-bottom: 20px; width: 65px; border-radius: 10px  ;">查询</el-button>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-button type="primary" size="mini" style="border-radius: 5px" @click="addBuilding">添加企业</el-button>
      </el-row>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="租赁楼宇">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="租赁起止时间">
                <span>{{ props.row.startTime }}</span>
              </el-form-item>
              <el-form-item label="合同状态">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="操作">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="企业名称"
          prop="name"
        />
        <el-table-column
          label="联系人"
          prop="contact"
        />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="mini">添加合同</el-button>
            <el-button type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini">编辑</el-button>
            <el-button type="text " size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          layout="prev, pager, next , jumper , total"
          :total="add.total"
          :page-size="add.pageSize"
          :current-page="add.page"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getbusinessAPI, getDetailbusinessAPI } from '@/api'
export default {
  data() {
    return {
      showDialog: false,
      list: [],
      add: {
        total: 0,
        name: '',
        pageSize: 10,
        page: 1
      }
    }
  },
  created() {
    this.getFloor()
  },
  methods: {
    async getFloor() {
      const { rows, total } = await getbusinessAPI(this.add)
      console.log(rows)
      this.list = rows
      this.add.total = total
    },
    addBuilding() {
      this.showDialog = true
    },
    changePage(newpage) {
      this.add.page = newpage
      this.getFloor()
    },
    editRole(id) {
      this.currentNodeId = id
      this.showDialog = true
      this.$refs.addDept.getFloor(id)
    },
    deleteRole(id) {
      getDetailbusinessAPI(id)
      this.getFloor()
    },
    async getList() {
      await this.getFloor()
    }
  }
}
</script>
